<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Profile</title>
	 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
	<!-- bower:css -->
	<link rel="stylesheet" href="../../bower_components/bootstrap/dist/css/bootstrap.min.css" />
	<link rel="stylesheet" href="../../bower_components/components-font-awesome/css/fontawesome-all.css" />
	<link rel="stylesheet" href="../../bower_components/bootstrap-fileinput/css/fileinput.min.css" />
	<link rel="stylesheet" href="../../bower_components/glyphicons/styles/glyphicons.css" />
	<link rel="stylesheet" href="../../bower_components/bootstrap-offcanvas/dist/css/bootstrap.offcanvas.css" />
	<!-- endbower -->

	<!-- inject:css -->
	<link rel="stylesheet" href="../css/common.css">
	<!-- endinject -->
	<style type="text/css">
		.myarrow{
			color:#ccc;
		}
		.offcanvas-toggle .icon-bar {
		    background-color: #fff;
		}
		.navbar-toggle{
		  float: left;
		}
		.avatar-center{
			width:100%;
			margin-top:10px;
		}
		.nav-background{
			background-color: #333333;
		}
		.myfa {
			display:inline-block;
			top:27px;
			left:6px;
			position:relative;
			color:#ccc;
		}
		.navfa {
			float:left;
			top:18px;
			left:6px;
			position:relative;
			color:#ccc;
		}
		.btn-pos{
			display:inline-block;
			top:27px;
			position:relative;
		}
		input[type="text"],input[type="password"] {
			padding-left:26px;
		}

		.kv-avatar .krajee-default.file-preview-frame,.kv-avatar .krajee-default.file-preview-frame:hover {
			margin: 0;
			padding: 0;
			border: none;
			box-shadow: none;
			text-align: center;
		}
		.kv-avatar {
			display: inline-block;
		}

		.navbar-default .navbar-brand{
			color:#fff;
		}
		.postcls{
			float:right;
			margin-top:10px;
		}
		.topname{
			float: right;
			color:#fff;
			margin-right:20px;
			margin-top:20px
		}

		.lef-avatar{
			margin-left:20px;
		}
		.leftname{
			float: left;
			margin-left: 20px;
			margin-top:20px;
			color:#fff;
		}
		.mt10{
			margin-top: 10px;
		}
		.ml10{
			margin-left: 10px;
		}
		.mr20{
			margin-right: 20px;
		}
		.mr50{
			margin-right: 50px;
		}
		.color-white{
			color:#fff;
		}
		.color-black{
			color:#000;
		}
		.color-blue{
			color:#8DEEEE;
		}
		.posttxt{
			margin-left:30px;
			margin-top:10px;
		}
		.notShow{
			display:none;
		}
		#avatar{
			width:80px;
			height:80px;
		}
		.postimg{
			width:80px;
			height:80px;
		}

	</style>
	
</head>
<body>
<!-- bower:js -->
<script src="../../bower_components/jQuery/dist/jquery.js"></script>
<script src="../../bower_components/jquery/dist/jquery.js"></script>
<script src="../../bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="../../bower_components/bootstrap-fileinput/js/fileinput.min.js"></script>
<script src="../../bower_components/bootstrap-offcanvas/dist/js/bootstrap.offcanvas.js"></script>
<!-- endbower -->

<!-- inject:js -->
<script src="../js/index.js"></script>
<!-- endinject -->

<script>
		$(function(){
			$.ajax({
				  type: "POST",
				  url: "../php/posts.php",
				  data: {},
				  success: function(data){
					  console.log(data);
					  var obj = eval('(' + data + ')');
					  var user = obj.user;
						
					  $(".user").html(user[2]);
					  $("#avatar").attr("src","../img/"+user[1]); 
					  var posts = obj.posts;
					  for(var i=0;i<posts.length;i++){
						  var post = posts[i];
						  var avatar = post[4];
						  if(avatar == null){
							  avatar = 'avatar.png';
						  }
						  $("#posts").append('<div class="row mt10 ml10"> <div class="row"> <div class="avatar-center"> <div class="float-left lef-avatar " > <img class="postimg" src="../img/'+avatar+'"/> </div> <span class="leftname color-blue">'+post[3]+'</span> </div> </div> <div class="row"> <div class="row color-white posttxt">'+post[1]+' </div> </div> <div class="row mt10"> <div class="row color-white posttxt"> <h6 class="float-left">'+post[2]+'</h6>  </div> </div> <div class="commentDiv row mt10 "> <div class="row color-white posttxt"><form action="../php/comment.php" method="post" class="color-black"><input  type="hidden" name="postid" value="'+post[0]+'"> <input name="comment" type="text"/> <button class="btn btn-primary">Comment</button></form> </div> </div> ');
						  $("#posts").append('<div class="row mt10"> ');
						  $.ajax({
							  type: "POST",
							  url: "../php/getcomments.php",
							  data: {"postid":post[0]},
							  success: function(data){
								  console.log(data);
								  //var comments = eval('(' + data + ')');
								  var comments = data;
								  for(var i=0;i<comments.length;i++){
									console.log(comments[i]);
								  	$("#posts").append(' <div class="row color-white posttxt "> <h6 class="float-left">'+comments[i][2]+" : "+comments[i][3]+'</h6> </div> ');
								  }
							  },
							  dataType: "json",
							  async:false
							});
						 
						  $("#posts").append('</div></div><hr>');
						  
					  }
					  
				  },
				  dataType: "json",
				  async:true
				});
			
		});
	</script>

<div class="container">
	<header class="clearfix">
        <button type="button" class=" navbar-toggle offcanvas-toggle " data-toggle="offcanvas" data-target="#js-bootstrap-offcanvas" id="offcanvas-toggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>

        <nav class="nav-background navbar navbar-default navbar-offcanvas navbar-offcanvas-touch" role="navigation" id="js-bootstrap-offcanvas">
            <div class="container-fluid">
                <div class="navbar-header">
                    <i class="fa navfa fa-edit fa-lg"></i> <a class="navbar-brand" href="makePost.html">Post</a>
                </div>
                <div class="navbar-header">
                    <i class="fa navfa fa-home fa-lg"></i> <a class="navbar-brand" href="posts.html">Home</a>
                </div>
                <div class="navbar-header">
                    <i class="fa navfa fa-user fa-lg"></i><a class="navbar-brand" href="info.html">Profile</a>
                </div>
                 <div class="navbar-header">
                    <i class="fa navfa fa-sign-out-alt fa-lg"></i><a class="navbar-brand" href="login.html">Logout</a>
                </div>
            </div>
        </nav>

		<a href="./makePost.html" class="btn btn-primary postcls">Post</a>
    </header>
	<div class="row mt10">

				<div class="kv-avatar float-right" >
						<img id="avatar" src="../img/avatar.png"/>
				</div>
				<span class="topname user">Tom </span>
	</div>
	<div id="posts">
		
	</div>
	


</div>

</body>
</html>
